<script lang="ts">
	import List, { Item, Graphic, Separator, Text } from '@smui/list';
	import Accordion, { Panel, Header, Content } from '@smui-extra/accordion';
	import type { DataType } from './types';

	let clicked = 'nothing yet';
	let element: any = null;
	export let series: string = '';
	export let category: string = '';
	export let list: DataType[] = [];
	export let style = '';

	$: defaultActivePanel = list.findIndex((item) => {
		if (item.ename === category && item.children)
			if (item.children.find((i) => i.ename === series)) return true;

		return false;
	});
</script>

<div class="side-bar w-320px min-h-500px bg-gray-1 flex-shrink-1 p-10px" {style}>
	<!-- 分类 -->
	<Accordion
		bind:this={element}
		class="reset-shrink-panel flex flex-col gap-4px"
		style="--mdc-theme-surface: #e5e7eb"
	>
		{#each list as item, index (index)}
			<Panel open={defaultActivePanel === index}>
				<Header>{item.ename}</Header>
				<Content>
					{#if item.children && item.children.length}
						<List class="demo-list" dense>
							{#each item.children as unit, k}
								<Item
									on:SMUI:action={() => (clicked = 'Edit')}
									activated={unit.ename === series ? true : false}
								>
									{#if k === 0}
										<Graphic class="material-icons"></Graphic>
									{:else}
										<Graphic class="material-icons"></Graphic>
									{/if}
									<Text>{unit.ename}</Text>
								</Item>
							{/each}
						</List>
					{:else}
						<div class="color-gray-4 h-36px line-height-36px indent-40px px-16px">none</div>
					{/if}
				</Content>
			</Panel>
		{/each}
	</Accordion>
</div>

<style>
	* :global(.demo-list) {
		max-width: 300px;
	}
</style>
